import { StyleSheet, Text, View, ScrollView, TextInput, TouchableOpacity } from 'react-native';
import React, { useState, useRef } from 'react';
import { useRoute, useNavigation } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import { NavBarHeader, MyLoading } from '~/components';
import { px2dp, scale } from '~/utils/px2dp';
import { useAddMessage } from '~/common';

export default function CreateMessage() {
    const { t } = useTranslation();
    const router: any = useRoute();
    const navigation = useNavigation();
    const { user_id } = router.params || {};
    const [content, setContent] = useState('');
    const [title, setTitle] = useState('');
    const { addMessage, loading, error } = useAddMessage();
    const loadingRef = useRef<any>();
    const onPress = async () => {
        loadingRef.current.showLoading();
        try {
            const response = await addMessage({
                type: 5,
                title,
                content,
                user_id: user_id,
            });
            loadingRef.current.hideLoading();
            if (response.message == 'ok') {
                Toast.show({ content: t('doctor.t9'), layout: 'top' });
                navigation.goBack();
            } else {
                Toast.show({ content: response.message, layout: 'top' });
            }
        } catch (err) {
            loadingRef.current.hideLoading();
        }
    };
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('doctor.t15')} />
            <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.contentContainerStyle}>
                <View style={{ marginTop: px2dp(32) }}>
                    <Text style={styles.title}>{t('doctor.t22')}</Text>
                    <View style={styles.inputStyle}>
                        <TextInput
                            placeholder={t('doctor.t23')}
                            value={title}
                            returnKeyType={'done'}
                            placeholderTextColor={'#a4a4a4'}
                            onChangeText={(val) => {
                                setTitle(val);
                            }}
                        />
                    </View>
                </View>
                <View style={styles.textArea}>
                    <Text style={styles.title}>{t('doctor.t24')}</Text>
                    <View style={styles.textArea1}>
                        <TextInput
                            multiline={true}
                            textAlignVertical="top"
                            numberOfLines={5}
                            value={content}
                            onChangeText={(val) => {
                                setContent(val);
                            }}
                            placeholder={t('doctor.t26')}
                            returnKeyType={'done'}
                        />
                    </View>
                </View>
                <TouchableOpacity style={[styles.bt, styles.row]} onPress={onPress}>
                    <Text style={styles.bt_text}>{t('doctor.t25')}</Text>
                </TouchableOpacity>
            </ScrollView>
            <MyLoading ref={loadingRef} />
        </View>
    );
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    contentContainerStyle: {
        flexGrow: 1,
        marginHorizontal: px2dp(24),
    },
    textArea: {
        marginTop: px2dp(32),
    },
    textArea1: {
        backgroundColor: '#F6F8FA',
        padding: px2dp(16),
        fontSize: scale(28),
        height: px2dp(300),
    },
    title: {
        color: '#111111',
        fontSize: scale(28),
        marginBottom: px2dp(24),
    },
    inputStyle: {
        borderRadius: px2dp(16),
        backgroundColor: '#F6F8FA',
        paddingHorizontal: px2dp(16),
        height: px2dp(100),
        flexDirection: 'row',
        alignItems: 'center',
    },
    bt: {
        justifyContent: 'center',
        backgroundColor: '#1877FF',
        height: px2dp(96),
        marginTop: '20%',
        borderRadius: px2dp(16),
    },
    bt_text: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: 'bold',
    },
});
